<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>course</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

<div class="container" style="margin: 20px auto;" id="courseApp">

    <button type="button" class="btn btn-primary" @click="fnShowCourseModal">add</button>

    <div class="card" v-for="(item, index) in dataList" :key="index" style="margin-top: 20px;">
        <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
        <div class="card-body">
            <h4 class="card-title">{{item.sname}}</h4>
            <table class="table table-responsive-sm">
                <tbody class="w-100">

                <tr class="row mx-0">
                    <td class="col-3" >课程编号</td>
                    <td class="col-9" >{{item.scode}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >适合范围</td>
                    <td class="col-9" >{{item.childAge}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >费用价格</td>
                    <td class="col-9" >{{item.fee}}</td>
                </tr>

                <tr class="row mx-0">
                    <td class="col-3">说明</td>
                    <td class="col-9">{{item.note}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3">操作</td>
                    <td class="col-9">

                        <button type="button"  class="btn btn-link" @click="fnShowCourseTermModal(item)">开班</button>
                        <button type="button"  class="btn btn-link" @click="fnShowCourseTerm(item)">查看开班</button>

                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    


     
<!-- 模态框 -->

<div class="modal fade" id="courseTermModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">操作</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body">

            <form>

                <div class="form-group">
                    <label for="">费用</label>
                    <input type="number" min="0"  class="form-control"  v-model="courseTermForm.fee">
                </div>
                <div class="form-group">
                  <label for="">上课时间</label>
                  <input type="text"  class="form-control"  v-model="courseTermForm.courseTime">
                </div>
                <div class="form-group">
                    <label for="">起始日期</label>
                    <input type="date"  class="form-control"  v-model="courseTermForm.startDate">
                </div>
                <div class="form-group">
                  <label for="">次数</label>
                  <input type="number"  min="0"  class="form-control"  v-model="courseTermForm.totals">
                </div>
                <div class="form-group">
                  <label for="">教室</label>
                  <input type="text"  class="form-control"  v-model="courseTermForm.room">
                </div>
                <div class="form-group">
                  <label for="">老师</label>

                    <div class="input-group mb-3">
                        <input type="text" class="form-control" v-model="courseTermForm.teachNames" readonly>
                        <div class="input-group-append">
                            <button class="btn btn-success" type="button" @click="fnSelectTeacherModal">选择</button>
                        </div>
                    </div>
                </div>




            </form>
        </div>

        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="fnSaveTerm">确定</button>
        </div>

      </div>
    </div>
  </div>



<div class="modal fade" id="courseModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">操作</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">

                    <form>

                        <div class="form-group">
                            <label for="">名称</label>
                            <input type="text"  class="form-control"  v-model="courseForm.sname">
                        </div>
                        <div class="form-group">
                            <label for="">课程编号</label>
                            <input type="text"  class="form-control"  v-model="courseForm.scode">
                        </div>
                        <div class="form-group">
                            <label for="">适合儿童</label>
                            <input type="text"  class="form-control"  v-model="courseForm.childAge">
                        </div>
                        <div class="form-group">
                            <label for="">费用价格</label>
                            <input type="number"  min="0"  class="form-control"  v-model="courseForm.fee">
                        </div>

                        <div class="form-group">
                            <label for="">说明</label>
                            <textarea class="form-control" v-model="courseForm.note" rows="3"></textarea>
                        </div>


                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fnSave">确定</button>
                </div>

            </div>
        </div>
    </div>




<div class="modal fade" id="teacherModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">操作</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">

                    <form>


                        <div class="form-group">
                            <label for="">老师</label>
                            
                            <div class="form-check" v-for="(item, index) in teachList" :key="index">
                                <label class="form-check-label">
                                  <input type="checkbox" class="form-check-input" :value="item" v-model="selectTeachs"> {{item.sname}} - {{item.phone}}
                                </label>
                              </div>
                        </div>


                    </form>

                    <!--<p> {{selectTeachs}}</p>-->
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fnSetTeacher">确定</button>
                </div>

            </div>
        </div>
    </div>

</div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#courseApp',
        data: {

            selectTeachs: [],

            courseForm: {

            },

            courseTermForm: {

                course: {
                    sid: "",
                }



            },


            dataList: [ ],
            teachList: [{
                sname: "wang",
                phone: "133"
            }, {
                sname: "li",
                phone: "222"
            }]




        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {



            //选择老师
            fnSelectTeacherModal(item){

                this.queryTeacher();
                $('#teacherModal').modal('show');
            },

            fnSetTeacher(){

                // console.log(this.selectTeachs)

                var teachNames = this.selectTeachs.map(function(item){
                    return item.sname;
                }).join();

                var teachIds = this.selectTeachs.map(function(item){
                    return item.sid;
                }).join();

                // console.log(teachNames);
                // console.log(teachIds);


                this.courseTermForm = Object.assign({}, this.courseTermForm, {
                    teachNames: teachNames,
                    teachIds: teachIds
                });

                // this.$nextTick(() => {
                //     this.courseTermForm.teachNames = teachNames;
                //     this.courseTermForm.teachIds = teachIds;
                // })

                $('#teacherModal').modal('hide');

            },

            // 课程班
            fnShowCourseModal(){

                $('#courseModal').modal('show');
            },

            //开课
            fnShowCourseTermModal(item){

                this.courseTermForm.course.sid = item.sid;
                $('#courseTermModal').modal('show');
            },



            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },




            //修改 item
            fnSave() {


                var _self = this;

                var postUrl = '/courses';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.courseForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                         if (response.code == 0) {

                           $('#courseModal').modal('hide');
                           _self.courseForm = { };
                           _self.queryCourse();
                         }

                    }
                });
            },


            fnSaveTerm() {


                var _self = this;

                var postUrl = '/course-terms';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.courseTermForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                         if (response.code == 0) {

                           $('#courseTermModal').modal('hide');
                           _self.courseTermForm = {
                               course: {
                                   sid: ''
                               }
                           };
                         }

                    }
                });
            },



            fnShowCourseTerm(item){

                window.open('courseTermHome.html?course-id=' + item.sid);
            },

            // 查询 cate
            queryCourse() {

                var _self = this;

                // this.courseForm.walleCard.sid = this.getQueryString("card-id");
                // var sid = this.getQueryString("sid");
                // if(!sid){
                //     return ;
                // }



                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./courses",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);

                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },

            queryTeacher() {

                var _self = this;

                // this.courseForm.walleCard.sid = this.getQueryString("card-id");
                // var sid = this.getQueryString("sid");
                // if(!sid){
                //     return ;
                // }



                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./teachers",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);

                            _self.teachList = response.dat.content;
                        }

                    }
                });
            },





        },
        mounted() {

             this.queryCourse();
        }
    })


</script>